<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>电子档案系统</title>
    <link rel="stylesheet" href="/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="/datatables-bs4/css/dataTables.bootstrap4.css">
    <link rel="stylesheet" href="/adminlte/css/adminlte.min.css">
    <link rel="stylesheet" href="/toastr/toastr.min.css">
    <link rel="stylesheet" href="/bootstrap-treeview/bootstrap-treeview.min.css">
    <style type="text/css">
        #grid{
            border-collapse: collapse;
            table-layout: fixed;
        }
        #grid tr{
            width: 100%;
        }
        #grid tr td{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-wrap: break-word;
        }
        #grid > thead > tr > th {
            text-align: center!important;
        }
    </style>
</head>
<body class="hold-transition sidebar-mini">
<div class="modal fade" id="modal-default">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">角色编辑</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" readonly="readonly">
                <div class="form-group">
                    <label for="id">ID</label>
                    <input type="text" id="id" class="form-control" value="">
                </div>
                <div class="form-group">
                    <label for="roleCode">编码</label>
                    <input type="text" id="roleCode" class="form-control" value="">
                </div>
                <div class="form-group">
                    <label for="roleName">名称</label>
                    <input type="text" id="roleName" class="form-control" value="">
                </div>
                <div class="form-group">
                    <label for="sort">排序</label>
                    <input type="number" id="sort" class="form-control" value="">
                </div>
                <div class="form-group">
                    <label for="status">状态</label>
                    <select id="status" class="form-control custom-select">
                        <option th:each="globalCode:${globalCodes}" th:value="${globalCode.getGlobalCode()}" th:text="${globalCode.getGlobalName()}"></option>
                    </select>
                </div>
                <div class="form-group">
                    <div id="tree"></div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="saveBtn" type="button" class="btn btn-primary" onclick="saveRole()">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="wrapper">
    <header th:replace="admin/common/header::header">

    </header>
    <aside th:replace="admin/common/left::left">

    </aside>
    <div class="content-wrapper">
        <section class="content-header" style="padding: 8px;">
        </section>

        <section class="content">
            <div class="card">
                <div class="card-header" >
                    <h3 class="card-title">角色列表</h3>
                </div>
                <div class="card-body row">
                    <div class="col-md-2">
                        <div id="roleTree"></div>
                    </div>
                    <div class="col-md-10">
                        <div>
                            <button class="btn btn-primary"><i class="fas fa-search"></i>查询</button>
                            <button class="btn btn-primary" onclick="addRole()"><i class="fas fa-plus"></i>新增</button>
                        </div>
                        <table id="grid" class="table table-bordered table-striped">
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <aside class="control-sidebar control-sidebar-dark">
        <div class="p-3">
            <h5>通知</h5>
            <p>内容</p>
        </div>
    </aside>

    <footer th:replace="admin/common/footer::footer">
    </footer>
</div>
<script src="/jquery/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/datatables/jquery.dataTables.js"></script>
<script src="/datatables-bs4/js/dataTables.bootstrap4.js"></script>
<script src="/adminlte/js/adminlte.min.js"></script>
<script src="/adminlte/js/demo.js"></script>
<script src="/toastr/toastr.min.js"></script>
<script src="/bootstrap-treeview/bootstrap-treeview.min.js"></script>
<script th:inline="javascript">
    function addRole(){
        $("#id").val('');
        $("#roleName").val('');
        $("#roleCode").val('');
        $("#sort").val('');
        $('#status option:first').prop('selected', 'selected');
        $('#modal-default').modal('show');
    }

    function saveRole(){
        let role={};
        role.id=$("#id").val();
        role.roleName=$("#roleName").val();
        role.roleCode=$("#roleCode").val();
        role.sort=$("#sort").val();
        role.status=$("#status").val();
        $.ajax({
            url:"/api/saveRole",
            type:"POST",
            dataType:"json",
            data:role,
            success:function(res){
                $("#modal-default").modal('hide');
                if(res.code=="200"){
                    toastr.success('保存成功');
                    $('#grid').DataTable().ajax.reload();
                }
                else{
                    toastr.error(res.message);
                }
            }
        })
    }

    function editRole(id,roleName,roleCode,status,sort){
        $("#id").val(id);
        $("#roleCode").val(roleCode);
        $("#roleName").val(roleName);
        $("#sort").val(sort);
        $("#status").val(status);
        $("#id").removeAttr("disabled");
        $("#roleCode").removeAttr("disabled");
        $("#roleName").removeAttr("disabled");
        $("#sort").removeAttr("disabled");
        $("#status").removeAttr("disabled");
        $("#saveBtn").removeAttr("style");
        $("#modal-default").modal('show');
    }

    function viewRole(id,roleName,roleCode,status,sort){
        $("#id").val(id);
        $("#roleCode").val(roleCode);
        $("#roleName").val(roleName);
        $("#sort").val(sort);
        $("#status").val(status);
        $("#id").attr("disabled","disabled");
        $("#roleCode").attr("disabled","disabled");
        $("#roleName").attr("disabled","disabled");
        $("#sort").attr("disabled","disabled");
        $("#status").attr("disabled","disabled");
        $("#saveBtn").attr("style","display:none;");
        $("#modal-default").modal('show');
    }

    function onRole(id){
        changeStatusRole(id,'990101');
    }

    function offRole(id){
        changeStatusRole(id,'990102');
    }

    function changeStatusRole(id , state){
        $.ajax({
            url:"/api/role/state/change",
            type:"POST",
            dataType:"json",
            data:{
                id:id,
                status:state
            },
            success:function(res){
                if(res.code=="200"){
                    toastr.success('修改成功');
                    $('#grid').DataTable().ajax.reload();
                }
                else{
                    toastr.error(res.message);
                }
            }
        });
    }



    $('#roleTree').treeview({
        data: [[${roleTree}]],
        levels: 5,
        collapseIcon: "fa fa-minus-square",//可收缩的节点图标
        emptyIcon: "fa",//设置列表树中没有子节点的节点的图标
        expandIcon: "fa fa-plus-square",  //设置列表上中有子节点的图标
        color: "#428bca",
        highlightSearchResults:true,//是否高亮搜索结果 默认true
        highlightSelected:true,     //是否选中高亮显示
        onhoverColor: "#f5f5f5",    //鼠标滑过的颜色
        // selectedBackColor: 'black',  //设置被选中的节点背景颜色
        //selectedColor : 'red',      //设置被选择节点的字体、图标颜色
        showBorder:true,                //是否显示边框
        showCheckbox:false,              //是否显示多选框
        //uncheckedIcon:'',             //设置未选择节点的图标
        showTags:true,//显示徽章
        enableLinks:true
    });

    $(function () {
        $("#grid").DataTable({
            processing: true,
            serverSide: false,
            lengthChange:false,
            searching:false,
            autoWidth:true,
            pageLength:10,
            ajax: {
                url:"/api/roles",
                data:{
                    roleCode:[[${roleCode}]]
                },
                type:"GET",
                dataSrc:"result"
            },
            columns: [
                {
                    data:null,
                    title:"序号" ,
                    width:100 ,
                    className: 'text-center whiteSpace',
                    render:function(data,type,row,meta) {
                        return meta.row + 1 +
                            meta.settings._iDisplayStart;
                    }},
                { data: "roleCode",title:"编码",width:100,className: 'text-center whiteSpace'},
                { data: "roleName",title:"名称",width:100,className: 'text-center whiteSpace'},
                { data: "status" ,title:"状态",width:100,className: 'project-state text-center whiteSpace',render:function(data,type,row,full){
                        if(data=='990101'){
                            return "<span class=\"badge badge-success\" style=\"font-size: 100%;\">启用</span>";
                        }else{
                            return "<span class=\"badge badge-danger\" style=\"font-size: 100%;\">禁用</span>";
                        }
                    }},
                { data: "creater" ,title:"创建人",width:100,className: 'text-center whiteSpace'},
                { data: "sort" ,title:"排序",width:100,className: 'text-center whiteSpace'},
                { data: "createTime" ,title:"创建时间" , width:100,className: 'text-center whiteSpace'},
                { data:"id", title:"操作",className: 'project-actions text-right text-center whiteSpace',render:function(data,type,row,full){
                        return "<a class=\"btn btn-primary btn-sm\" href=\"#\" onclick=\"viewRole('"+data+"','"+row.roleName+"','"+row.roleCode+"','"+row.status+"','"+row.sort+"')\"><i class=\"fas fa-folder\"></i>查看</a>\n" +
                            "<a class=\"btn btn-info btn-sm\" href=\"#\" onclick=\"editRole('"+data+"','"+row.roleName+"','"+row.roleCode+"','"+row.status+"','"+row.sort+"')\"><i class=\"fas fa-pencil-alt\"></i>编辑</a>\n" +
                            (row.status=='990102'?"<a class=\"btn btn-danger btn-sm\" onclick=\"onRole('"+data+"')\" href=\"#\"><i class=\"fas fa-trash\"></i>启用</a>":"<a class=\"btn btn-danger btn-sm\" onclick=\"offRole('"+data+"')\" href=\"#\"><i class=\"fas fa-trash\"></i>禁用</a>");
                    }}
            ],
            language: {
                processing: "处理中...",
                lengthMenu: "显示 _MENU_ 项结果",
                zeroRecords: "没有匹配结果",
                info: "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                infoEmpty: "显示第 0 至 0 项结果，共 0 项",
                infoFiltered: "(由 _MAX_ 项结果过滤)",
                infoPostFix: "",
                search: "搜索:",
                url: "",
                emptyTable: "表中数据为空",
                loadingRecords: "载入中...",
                infoThousands: ",",
                paginate: {
                    first: "首页",
                    previous: "上页",
                    next: "下页",
                    last: "末页"
                },
                aria: {
                    sortAscending: ": 以升序排列此列",
                    sortDescending: ": 以降序排列此列"
                }
            }
        });
    });
</script>
</body>
</html>
